<template>
    <div class="h-full overflow-auto">
        <template v-if="props.type == 'sysNotice'">
            <n-card
                v-if="data.content"
                title="内容"
                size="small"
                :segmented="{
                    content: true,
                    footer: 'soft'
                }"
            >
                <div v-html="data.content"></div>
            </n-card>
            <n-card
                v-if="data.files"
                class="mt-16px"
                title="附件"
                size="small"
                :segmented="{
                    content: true,
                    footer: 'soft'
                }"
            >
                <jb-upload
                    :model-value="data.files ?? []"
                    :only-show="true"
                    show-download-button
                    :show-remove-button="false"
                    :show-cancel-button="false"
                >
                </jb-upload>
            </n-card>
            <n-descriptions label-placement="left" bordered class="mt-16px" :column="2">
                <n-descriptions-item label="接收者类型"
                    ><jb-tag-group
                        :tags="data.receiverTypeName ?? '未设置'"
                    ></jb-tag-group
                ></n-descriptions-item>
                <n-descriptions-item label="已读数">{{
                    data?.readCount ?? 0
                }}</n-descriptions-item>
                <n-descriptions-item label="接受者信息">
                    {{ data?.receiverValues ?? '未设置' }}
                </n-descriptions-item>
            </n-descriptions>
            <n-descriptions label-placement="left" bordered class="mt-16px" :column="2">
                <n-descriptions-item label="状态">
                    <n-tag :type="data?.delFlag ? 'error' : 'success'">{{
                        data?.delFlag ? '回收站' : '正常'
                    }}</n-tag>
                </n-descriptions-item>
                <n-descriptions-item label="类型"
                    ><jb-tag-group :tags="data.typeName ?? '未设置'"></jb-tag-group
                ></n-descriptions-item>
                <n-descriptions-item label="优先级"
                    ><jb-tag-group
                        :tags="data.priorityLevelName ?? '未设置'"
                    ></jb-tag-group
                ></n-descriptions-item>
                <n-descriptions-item label="发布用户">
                    {{ data?.createUserName ?? '' }}
                </n-descriptions-item>
                <n-descriptions-item label="更新用户">
                    {{ data?.updateUserName ?? '' }}
                </n-descriptions-item>
                <n-descriptions-item label="创建时间">
                    {{ data?.createTime ?? '' }}
                </n-descriptions-item>
                <n-descriptions-item label="更新时间">
                    {{ data?.updateTime ?? '' }}
                </n-descriptions-item>
            </n-descriptions>
        </template>

        <template v-else>
            <n-card
                v-if="data.content && (data.type == 2 || data.type == 4)"
                title="待办事项"
                size="small"
                :segmented="{
                    content: true,
                    footer: 'soft'
                }"
            >
                <div v-html="data.content"></div>
            </n-card>
            <div class="mt-16px">
                <jb-btn
                    v-if="data.url && (data.type == 3 || data.type == 4)"
                    :url="data.url"
                    :is-link-btn="true"
                    type="primary"
                    >此待办事项关联其它数据，请点击查看</jb-btn
                >
            </div>
            <n-descriptions label-placement="left" bordered class="mt-16px" :column="3">
                <n-descriptions-item label="状态">
                    <jb-tag-group :tags="data.stateName"></jb-tag-group>
                </n-descriptions-item>
                <n-descriptions-item label="优先级"
                    ><jb-tag-group
                        :tags="data.priorityLevelName ?? '未设置'"
                    ></jb-tag-group
                ></n-descriptions-item>
                <n-descriptions-item label="规定完成时间">
                    {{ data?.specifiedFinishTime ?? '' }}
                </n-descriptions-item>
            </n-descriptions>
        </template>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { JBoltApi } from '@/utils/request'
import { type ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        id: string
        type: string
    }>(),
    {
        id: '',
        type: ''
    }
)
const data = ref<any>({})

onMounted(async () => {
    if (props.id && props.type) {
        if (props.type == 'sysNotice') {
            const { error, result } = await JBoltApi.get<ResData>(
                `/api/admin/msgCenter/sysNoticeDetail/${props.id}`
            )
            if (error) return
            data.value = result.data.sysNotice
        } else {
            const { error, result } = await JBoltApi.get<ResData>(
                `/api/admin/msgCenter/todoDetail/${props.id}`
            )
            if (error) return
            data.value = result.data
        }
    }
})
</script>
<style scoped>
.upload :deep(.n-upload-trigger) {
    display: none;
}
</style>
